import React,{useState,useEffect} from 'react'
import './index.scss'
import T from 'prop-types'

export default function Header(props) {
  const {getI} = props
  const List = ['全部','问答','交易','城市','技术']
  const [i, setI] = useState(0)
  useEffect(()=>{

  },[i])
  return (
    <div className="dynamic-header">
      <div className="dynamic-header-text">全部帖子</div>
      <div className="dynamic-header-items">
        {List.map((item, index) => (
          <div
            className="header-item"
            key={item}
            onClick={()=>{
              getI(index) 
              setI(index)
            }}
            style={{ backgroundColor: i === index ? '#f3ced2' : '#a2d5f2' }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  )
}
Header.propTypes = {
  getI:T.func,
}